<template>
  <div class="box-con">
    <div class="top">
      <div class="t-list">
        <div
          class="l-item animate__animated animate__bounce"
          v-for="(item, index) in titleList"
        >
          <div class="sta-li">
            <img src="@/assets/bigScreen/costa-bg.png" alt="" />
            <div class="sta-li-r">
              <div class="text">{{ item.name }}</div>
              <div class="count">
                <CountTo
                  :startVal="0"
                  :endVal="Number(item.value)"
                  :separator="false"
                  :duration="2000"
                /><span>{{ item.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="c-left">
        <div class="l-top">
          <div class="title-item animate__animated animate__backInLeft">
            各区电动自行车情况
          </div>
          <div class="content1 animate__animated animate__backInLeft">
            <barCharts
              :key="1"
              :xData="ddcXData"
              :sData="ddcSData"
              legendText="各区电动自行车情况"
            ></barCharts>
          </div>
        </div>
        <div class="l-bottom">
          <div class="title-item animate__animated animate__backInLeft">
            各区建设疏散楼梯情况
          </div>
          <div class="content1 animate__animated animate__backInLeft">
            <barCharts
              :key="2"
              :xData="floorxData"
              :sData="floorsData"
              legendText="各区建设疏散楼梯情况"
            ></barCharts>
          </div>
        </div>
      </div>
      <div class="c-right">
        <div class="r-top">
          <div class="r-t-left">
            <div class="l-list">
              <div
                class="l-l-item animate__animated animate__backInRight"
                v-for="(item, index) in rLeftList"
                @click="rLeftClick(item)"
                :class="{ 'active-item': selectedIndex === index }"
              >
                <img :src="item.url" alt="" />
                <div class="title">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="r-t-right">
            <div class="title-item animate__animated animate__backInRight">
              <!-- 疏散通道达标房屋数量 -->
              {{ rLeftList[selectedIndex].name }}
            </div>
            <div class="content1 animate__animated animate__backInRight">
              <bar1
                ref="rLeft"
                :key="3"
                :xData="rightxData"
                :sData="rightsData"
                :legendText="ssLegendText"
              ></bar1>
            </div>
          </div>
        </div>
        <div class="r-bottom">
          <div class="c-r-left">
            <div class="title-item animate__animated animate__backInRight">
              各区租住人口情况
            </div>
            <div class="content1 animate__animated animate__backInRight">
              <barCharts
                :key="4"
                :xData="zzrkxData"
                :sData="zzrksData"
                legendText="各区租住人口情况"
              ></barCharts>
            </div>
          </div>
          <div class="c-r-right">
            <div class="title-item animate__animated animate__backInRight">
              其他经营业态
            </div>
            <div class="content1 animate__animated animate__backInRight">
              <pieCharts :pieData="qqjyytData" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CountTo } from 'vue3-count-to'
import { useRoute, useRouter } from 'vue-router'
import left3 from '@/Pages/bigScreen/components/baseInfo/charts/left3.vue'
import bar1 from '@/Pages/bigScreen/components/baseInfo/charts/bar1.vue'
import pie from '@/Pages/bigScreen/components/baseInfo/charts/pie.vue'
import pieCharts from '@/Pages/bigScreen/components/baseInfo/charts/pieCharts.vue'
import barCharts from '@/Pages/bigScreen/components/baseInfo/charts/barCharts.vue'
import url1 from '@/assets/bigScreen/costa-bg.png'
import {
  getBaseInfoTitle,
  getBaseInfoDdc,
  getBaseInfoFloor,
  getBaseInfoZzrk,
  getBaseInfoThree,
  getBaseInfoQtjyyt,
} from '@/api/index.js'
const router = useRouter()
const currentIndex = ref(1)
// 1. 标题卡片
const titleList = ref([])
const _getBaseInfo = async () => {
  let res = await getBaseInfoTitle()
  if (res) {
    titleList.value = res.data.data
  }
}
// 2.各区县电动自行车情况
const ddcXData = ref([])
const ddcSData = ref([])
const _getBaseInfoDdc = async () => {
  let res = await getBaseInfoDdc()
  if (res) {
    let arr = res.data.data
    ddcXData.value = arr.map((item) => item.name)
    ddcSData.value = arr.map((item) => item.count)
  }
}
// 3.各区县建设疏散楼梯情况
const floorxData = ref([])
const floorsData = ref([])
const _getBaseInfoFloor = async () => {
  let res = await getBaseInfoFloor()
  if (res) {
    let arr = res.data.data
    floorxData.value = arr.map((item) => item.name)
    floorsData.value = arr.map((item) => item.count)
  }
}
// 4.疏散通道达标房屋数量
const rightxData = ref([])
const rightsData = ref([])
const allData = ref([])
const _getBaseInfoThree = async () => {
  let res = await getBaseInfoThree()
  if (res) {
    allData.value = res.data.data
    let arr1 = res.data.data[0]
    rightxData.value = arr1.map((item) => item.name)
    rightsData.value = arr1.map((item) => item.count)
  }
}
const rLeft = ref()
const selectedIndex = ref(0)
const ssLegendText = ref('疏散通道达标房间数量')
const rLeftClick = (item) => {
  selectedIndex.value = item.id
  if (item.id === 0) {
    rightxData.value = allData.value[0].map((item) => item.name)
    rightsData.value = allData.value[0].map((item) => item.count)
    ssLegendText.value = '疏散通道达标房间数量'
  } else if (item.id === 1) {
    rightxData.value = allData.value[1].map((item) => item.name)
    rightsData.value = allData.value[1].map((item) => item.count)
    ssLegendText.value = '防烟逃生面罩'
  } else if (item.id === 2) {
    rightxData.value = allData.value[2].map((item) => item.name)
    rightsData.value = allData.value[2].map((item) => item.count)
    ssLegendText.value = '悬挂固定警示标牌'
  }
  rLeft.value.initCharts()
}
// 5.各区县租住人口情况
const zzrkxData = ref([])
const zzrksData = ref([])
const _getBaseInfoZzrk = async () => {
  let res = await getBaseInfoZzrk()
  if (res) {
    let arr = res.data.data
    zzrkxData.value = arr.map((item) => item.name)
    zzrksData.value = arr.map((item) => item.count)
  }
}
// 6.其他经营业态
const qqjyytData = ref([])
const _getBaseInfoQtjyyt = async () => {
  let res = await getBaseInfoQtjyyt()
  if (res) {
    let arr = res.data.data
    arr = arr.map((item) => {
      let o = { name: item.name, value: item.count }
      return o
    })
    qqjyytData.value = arr
  }
}
// 隐患处理总数
const spLinexData = ref([
  '东城区',
  '西城区',
  '朝阳区',
  '丰台区',
  '石景山区',
  '海淀区',
  '门头沟区',
  '房山区',
  '通州区',
  '顺义区',
  '昌平区',
  '大兴区',
])
const rLeftList = ref([
  {
    name: '疏散通道达标房间数量',
    url: url1,
    id: 0,
  },
  {
    name: '防烟逃生面罩',
    url: url1,
    id: 1,
  },
  {
    name: '悬挂固定警示标牌',
    url: url1,
    id: 2,
  },
])

onMounted(() => {
  _getBaseInfo() // 获取标题
  _getBaseInfoDdc() // 各区县电动自行车情况
  _getBaseInfoFloor() // 各区县建设疏散楼梯情况
  _getBaseInfoZzrk() // 各区县租住人口情况
  _getBaseInfoThree() // 疏散通道达标房屋数量
  _getBaseInfoQtjyyt() // 其他经营业态
})
</script>

<style scoped lang="scss">
.box-con {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  //   overflow: hidden;
  //   border: 1px solid red;
  .top {
    width: calc(100% - 5rem);
    border: 2px solid #1c336c;
    height: 16%;
    padding: 2rem;
    .t-list {
      display: flex;
      justify-content: space-between;
      height: 100%;
      .l-item {
        width: 12%;
        height: 100%;
        border: 2px solid #1f3874;
        border-radius: 0.6rem;
        box-sizing: border-box;
        @keyframes fadenum {
          100% {
            transform: rotate(360deg);
          }
        }
        .sta-li {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          img {
            width: 6rem;
            height: 6rem;
            animation: fadenum 2s infinite;
          }
          .sta-li-r {
            height: 4rem;
            .text {
              font-size: 0.7vw;
              line-height: 1.7rem;
              color: rgb(255, 255, 255);
              margin-bottom: 1rem;
            }
            .count {
              text-align: right;
              font-size: 1.1vw;
              line-height: 2.2rem;
              color: rgba(255, 255, 255, 0.87);
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .content {
    width: calc(100% - 4rem);
    height: 77%;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    .c-left {
      //   border: 1px solid red;
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .l-top {
        border: 2px solid #1c336c;
        // border: 2px solid #1c336c;
        height: 48%;
      }
      .l-bottom {
        // border: 1px solid red;
        border: 2px solid #1c336c;
        height: 48%;
      }
    }
    .c-right {
      //   border: 1px solid red;
      width: 59%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .r-top {
        // border: 1px solid red;
        // border: 2px solid #1c336c;
        height: 48%;
        display: flex;
        justify-content: space-between;
        .r-t-left {
          height: 100%;
          width: 20%;
          border: 2px solid #1c336c;
          .l-list {
            height: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            // background-color: salmon;
            // border: 1px solid salmon;
            // border: 1px solid #1c336c;

            .l-l-item {
              height: 30%;
              width: 100%;
              //   border: 1px solid salmon;
              border: 1px solid #1c336c;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              @keyframes fadenum1 {
                100% {
                  transform: rotate(-360deg);
                }
              }
              img {
                width: 4rem;
                height: 4rem;
                animation: fadenum1 2s infinite;
              }
              .title {
                font-size: 0.8vw;
              }
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
        .r-t-right {
          height: 100%;
          width: 80%;
          border: 2px solid #1c336c;
          //   padding: 2rem;
          //   border: 1px solid yellow;
        }
      }
      .r-bottom {
        // border: 1px solid red;
        // border: 2px solid #1c336c;
        height: 48%;
        display: flex;
        justify-content: space-between;
        .c-r-left {
          width: 64%;
          height: 100%;
          //   border: 1px solid yellow;
          border: 2px solid #1c336c;
        }
        .c-r-right {
          width: 35%;
          height: 100%;
          //   border: 1px solid yellow;
          border: 2px solid #1c336c;
        }
      }
    }
  }
}
.h4s {
  height: 4.5rem;
  line-height: 4.5rem;
  background-image: url('@/assets/bigScreen/title-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem 0.3rem 4.7rem;
  box-sizing: border-box;

  .tit-l {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.6rem;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);

    span {
      font-size: 1.4rem;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 0.62);
      margin-left: 1.8rem;
    }
  }

  .tit-r {
    display: flex;
    align-items: center;
  }
  .more {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 2.6rem;
    letter-spacing: 0rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0.24rem 0.47rem 0 rgba(0, 80, 203, 0.61);
    cursor: pointer;
  }
}
::v-deep .searchk .ant-picker {
  background-color: inherit;
  border: 0.1rem solid rgba(2, 251, 253, 0.3);
  padding: 0rem 1rem !important;
}
::v-deep .searchk .ant-picker-input > input {
  color: #02fbfd;
}
.title-item {
  height: 4rem;
  line-height: 2rem;
  font-size: 0.8vw;
  padding-left: 1rem;
  // border: 1px solid red;
  background-image: url('@/assets/bigScreen1/title.png');
  background-repeat: no-repeat;
  background-size: 100% 90%;
}
.content1 {
  height: calc(100% - 4rem);
}
.active-item {
  color: #01e7f6;
}
</style>
